<template>
  <div class="chat" @click="closeDelButton()">
    <!-- 机器人聊天窗口 -->
    <div class="chat-container">
      <div class="chat-list">
        <div class="chat-title">
          <span v-html="this.chatTitle" />
          <i
            style="float: right"
            class="el-icon-setting"
            @click="setGroupBtn"
            v-if="fixedFlag === 1 && reduceFlag === 0"
          />
        </div>
        <ul>
          <li :id="'infoId-' + item.infoId" class="chat-item" v-for="(item, index) in chatList" :key="item.infoId">
            <div class="myself" v-if="item.sendUserId === nowUserId && item.msgFlag === 0">
              <div>
                <p>{{ item.sendUserName }} <span> {{ item.sendTime }} </span> </p>
                <div @mouseleave="item.show = false" @contextmenu.prevent="revokeBtnShowFn(item)">
                  <!-- 文本信息 -->
                  <p class="msg-wrapper" v-html="item.msg"></p>
                  <!-- 是否已读 -->
                  <p class="read-or-not" v-if="!fixedFlag">
                    {{ item.unreadFlag ? "已读" : "未读" }}
                  </p>
                  <div class="withdraw-wrapper" v-if="item.show">
                    <el-button link type="primary" @click="revokeBtn(item, index)">撤回</el-button>
                  </div>
                </div>
              </div>
              <div><span> {{ item.sendUserName.substr(0, 1) }} </span></div>
            </div>

            <div class="others" v-if="item.sendUserId !== nowUserId && item.msgFlag === 0">
              <div><span> {{ item.sendUserName.substr(0, 1) }} </span></div>
              <div>
                <p>{{ item.sendUserName }} <span> {{ item.sendTime }} </span></p>
                <!-- 文件 -->
                <div v-if="item.card" class="file-wrapper">
                  <!-- 常见问题卡片 -->
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>猜您想问</span>
                      <el-button @click="changeData(index)" icon="el-icon-refresh-right" style="float: right; padding: 3px 0" type="text">换一换</el-button>
                    </div>
                    <div v-for="(o,i) in item.msg" :key="i" class="text item">
                      <el-link @click="cardBtn(o.wtms)">{{o.wtms}}</el-link>
                    </div>
                  </el-card>
                </div>
                <!-- 文本信息 -->
                <p v-else class="msg-wrapper" v-html="item.msg"></p>
              </div>
            </div>
            <!-- 退出群聊，撤回信息提示 -->
            <div style="text-align: center; color: #8896b7; font-size: 14px" v-if="item.msgFlag === 1">
              <span v-html="item.msg"></span>
            </div>
          </li>
          <li ref="lastChatItemRef" class="last-chat-item"></li>
        </ul>
      </div>
      <!-- 消息发送框 -->
      <div class="chat-send" v-if="chatTitle">
        <!-- 工具栏 -->
        <div :class="['chat-tool']">
          <div>
            <Emoji @sendEmoji="sendEmoji" />
          </div>
        </div>
        <!-- 消息输入框 -->
        <div class="chat-input">
          <el-input
            v-model="sendMessage"
            :rows="3"
            resize="none"
            type="textarea"
            @keyup.enter.native="enterSendBtn"
            maxlength="200"
          />
        </div>
        <!-- 消息发送按钮 -->
        <div class="chat-send-btn">
          <el-button type="primary" @click="sendBtn" size="mini">
            发送
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/framework/utils/auth";
import {
  chatGroupQueryApi,
  chatHistoryPageApi,
  chatHistoryListApi,
  chatHistoryDelApi,
  chatHistoryRevokeApi,
  chatGroupInfoApi,
  chatGroupEditApi,
  chatGroupDelApi,
  chatGroupMemberApi,
  chatGroupExitApi,
  chatGroupAddApi,
  getOrgTreeApi,
  getSysUserPageApi,
  chatHistoryListVisitorApi,
  chatGroupQueryVisitorApi,
} from "./chatjs";
// 客服消息
import {
  listAccessInfo,
  getAccessInfo,
  delAccessInfo,
  addAccessInfo,
  updateAccessInfo,
  getAccessInfoApi,
  revokeAccessInfoApi,
  getAccessInfoAllocationApi
} from "../../api/accessInfo/AccessInfo";
import {
  listTouristUser,
  getTouristUser,
  delTouristUser,
  addTouristUser,
  updateTouristUser,
  getTouristInfo
} from "../../api/touristUser/TouristUser";
import { parseTime } from "@/framework/utils/date";
import Emoji from "./emoji.vue";
import store from "@/store";
import { cloud } from "@/framework/utils/request";
import { getUserTree } from "../../framework/api/notice";

export default {
  name: "chatOnlinePc",

  components: {
    Emoji,
  },
  data() {
    return {
      delUserId: "",
      choseId: "",
      nowChat: false,
      delButton: false,
      nowUserId: "游客",
      ws: null,
      sendMessage: "",
      lastChatItemRef: null,
      sessionActive: "",
      chatTitle: "客服",
      chatList: [],
      sessionList: {},
      userInfoInPage: null,
      groupId: null,
      moreMessageBtnShow: true,
      // 是否是群组 0不是 1是
      fixedFlag: 0,
      //群组是否已解散或退出 0未解散 1已解散
      reduceFlag: 0,
      drawerVisible: false,
      // 群组成员
      groupInfo: {},
      groupUsers: [],
      adminFlag: false,
      groupForm: {
        groupName: "",
      },
      // 上传文件携带的token
      headers: {
        Authorization: getToken(),
      },
      // 上传文件地址
      uploadUrl:
        process.env.VUE_APP_BASE_API + cloud.file + "/sysFileInfo/upload",
      // 上传的文件，是否是机密文件
      paramsData: {
        secretFlag: "N",
      },
      //------弹窗字段信息-----------------------------
      isChat: true,
      isOrg: true,
      userInfo: {},
      dialogVisible: false,
      treeData: [],
      selectedUserList: [],
      filterText: "",
      treeRef: [],
      ChatRef: "",
      newGroupId: "",
      addMemberGroupId: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      orgTree: [],
      orgTreeRef: [],
      orgFilterText: "",
      orgDefaultProps: {
        children: "children",
        label: "orgName",
      },
      orgName: "",
      userActive: "",
      userInfo: {},
      userList: [],
      serviceOrNot:true,
      lastRequestTime: null,
      youkeId: null,
      // 是否人工聊天
      artificialOrNot: false,
      index: 0,
      cardDataList: [],
    };
  },
  created() {
    // this.nowUserId = store.state.user.userId;
    // this.webSocketInit();
    this.getTouristInfo();
    this.getChatHistoryPage();
  },
  methods: {
    // 获取游客信息
    getTouristInfo(){
      getTouristInfo({pcMac:""}).then(res=>{
        if (res.code == "00000") {
          this.nowUserId = res.data.id
        }
      })
    },
    baseURL() {
      return process.env.VUE_APP_TARGET
    },
    // WebSocket链接
    webSocketInit(){
      // const path=this.baseURL().split("://")[1];
      // 线上
      // const path = "172.31.86.10:21023";
      // var wspath="ws://"+path+"/chat/online/manager/uuid&"+getToken();
      // const path="localhost:9528/";
      const path="localhost:9528";
      const youkeId = this.youkeId;//标识
      // var wspath="ws://"+path+"/dev-api/business/chat/online/manager/uuid&"+getToken()+"/"+youkeId;
      // 模拟游客登录token为空
      var wspath="ws://"+path+"/dev-api/business/chat/online/manager/uuid&/"+getToken()+youkeId;
      this.ws = new WebSocket(wspath);
      // console.info("init ws=",this.ws)
      this.ws.onmessage = (e) => {
        console.log("onmessage=",e)
        this.websocketonmessage(e)
      }
      this.ws.onclose = (e) => {
        console.log("onclose=",e)
        this.websocketclose(e);
      };
      this.ws.onopen = (e) => {
        console.log("open=",e)
        this.websocketOpen(e);
      };
    },
    // 链接
    websocketonmessage (e) {
      let res = JSON.parse(e.data);
      const obj = this.sessionList[res.groupId]
      let msgData = {}
      console.log("获取信息=",res)
      switch (res.code) {
        // 消息数据 msgFlag: 0消息， 1通知 
        case "msgData":
          console.log("this.chatList1=",parseTime(new Date(res.sendTime), '{y}-{m}-{d} {h}:{i}:{s}'))
          this.chatList.push({
            delFlag: 0,
            msgFlag: 0,
            msg: res.msg,
            sendTime: this.timeStampToTime(new Date(res.sendTime)),
            sendUserName: res.sendUserName,
            sendUserId: res.sendUserId,
            show: false
          })
          this.reduceFlag = 0
          this.sendMessage = ""
          break;
        // 确认数据
        case "ackData":
          if (res.status !== 0) {
            this.$message({
              message: res.tip,
              type: 'warning',
            })
          } else {
            if (res.groupId === this.groupId) {
              let msgData = {
                delFlag: 0,
                msgFlag: 0,
                fileSuffix: res.fileSuffix,
                fileSizeInfo: res.fileSizeInfo,
                fileId: res.fileId,
                infoId: res.infoId,
                msg: res.fileId ? res.msg : this.sendMessage.replace(/</g, '&lt;'),
                sendTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
                sendUserName: store.state.user.name,
                sendUserId: store.state.user.userId,
                show: false
              }
              this.chatList.push(msgData)
            }
            this.sendMessage = ''
          }
          break;

        // 已读数据
        case "readData":
          if (this.groupId) {
            this.chatList.forEach(element => {
              element.unreadFlag = 1
            })
          }
          break;
        
        // 撤回数据
        case "delData":
          this.chatList.forEach((child, index) => {
            if (child.infoId === res.infoId) {
              this.chatList[index].delFlag = 1
              this.chatList[index].msgFlag = 1
              this.chatList[index].msg = `${child.sendUserName}撤回了一条消息`
            }
          })
          this.sessionList[res.groupId].lastMsg =  res.tip
          this.sessionList[res.groupId].lastTime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
          if (this.sessionList[res.groupId].unreadData > 0) {
           this.sessionList[res.groupId].unreadData--
          }
          
          break;

        // 解散群聊  
        case "groupDelData":
          this.drawerVisible = false
          this.reduceFlag = 1
          if (obj) {
            obj.reduceFlag = 1
            obj.lastMsg = res.tip
          }
          if (res.groupId === this.groupId) {
            msgData = {
              msgFlag: 1,
              msg: res.tip
            }
            this.chatList.push(msgData)
          }
          break;

        // 踢出群聊
        case "reduceData":
          if (res.userIds && (res.userIds[0] === store.state.user.userId)) {
            this.drawerVisible = false
            this.reduceFlag = 1
            
            if (obj) {
              obj.reduceFlag = 1
            }
          }
          this.getMemberList()
          if (obj) {
            obj.lastMsg = res.tip
          }
          if (res.groupId === this.groupId) {
            msgData = {
              msgFlag: 1,
              msg: res.tip
            }
            this.chatList.push(msgData)
          }
          break;

        // 加入群聊
        case "addData":
          if (obj) {
            obj.lastMsg = res.tip
            obj.reduceFlag = 0
          }
          if (res.groupId === this.groupId) {
            this.reduceFlag = 0
            msgData = {
              msgFlag: 1,
              msg: res.tip
            }
            this.chatList.push(msgData)
          }
          
          this.getMemberList()
          break;

        // 修改群名
        case "groupNameData":
          if (res.groupId === this.groupId) {
            this.chatTitle = res.msg
            msgData = {
              msgFlag: 1,
              msg: res.tip
            }
            this.chatList.push(msgData)
            this.groupForm.groupName = res.msg
          }
          if (obj) {
            obj.groupName = res.msg
            obj.lastMsg = res.tip
          }
          break;

        // 消息发送异常
        case "exceptionData":
          break;
        //客服上线通知
        case "onlineData":
          if (this.groupId) {
            if (res.groupId) {
              this.groupId = res.groupId
              this.chatList.push({
                delFlag: 1,
                msgFlag: 1,
                msg: res.msg,
                sendTime: parseTime(new Date(res.sendTime), '{y}-{m}-{d} {h}:{i}:{s}'),
                sendUserName: res.sendUserName,
                sendUserId: res.sendUserId,
                show: false
              })
            }
          }
          break;


        default:
          break
      }
      console.info("chatList",this.chatList)
      this.$nextTick(() => {
        this.scrollBottom(this.groupId)
      })
    },
    // 时间转换
    timeStampToTime(time) {
      var date = time
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
    },
    websocketclose(e) {
      // console.log("websocket关闭")
      // code 1000 是主动关闭
      if (e.code !== 1000) {
        this.webSocketInit()
      }
    },
    // 主动关闭
    close () {
      this.ws.close(1000)
    },
    // 连接成功
    websocketOpen(e) {
      console.log("连接成功")
    },
    //数据发送
    websocketsend(agentData, callback) {
      console.log("发送数据=",agentData);
      this.$nextTick(() => {
        this.scrollBottom(this.groupId)
      })
      if (this.ws.readyState === WebSocket.OPEN) {
        //若是ws开启状态
        this.ws.send(JSON.stringify(agentData));
        // 获取游客信息
        this.getTouristInfo();
        // 重新获取聊天数据
        // chatHistoryPageApi({ groupName: '' })
        // .then(({ data, code }) => {
        //   if (code === '00000') {
        //     this.sessionList = data
        //     this.getChatHistoryList()
        //     this.sendMessage = ""
        //   }
        // })
      } else {
        this.$message.warning("发送失败")
      }
    },
    // 回车发送
    enterSendBtn (event) {
      if (event.shiftKey && event.keyCode === 13) {
      } else if (event.keyCode === 13) {
        event.preventDefault();
        this.sendBtn()
      }
    },
    // 发送按钮
    sendBtn() {
      const message = this.sendMessage.replace(/\n/g, '').replace(/ /g, '')
      if (!message) return
      this.addSessionList()
    },
    // 点击问题卡片列表
    cardBtn(data){
      // 获取游客用户信息
      this.getTouristInfo()
      const message = data.replace(/\n/g, '').replace(/ /g, '')
      this.chatList.push({
        delFlag: 0,
          unreadFlag: "已读",
          msgFlag: 0,
          msg: message,
          sendTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
          sendUserName: "游客",
          sendUserId: this.nowUserId,
          show: false
      })
      this.getProblemAnswer(data)
    },
    // 根据data获取问题预设答案信息
    getProblemAnswer(data){
      //
      const message = "这是问题预设答案"
      this.chatList.push({
        delFlag: 0,
          unreadFlag: "已读",
          msgFlag: 0,
          msg: message,
          sendTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
          sendUserName: "客服",
          sendUserId: "客服",
          show: false
      })
      // 滑动到聊天底部
      this.$nextTick(() => {
        this.scrollBottom(this.groupId)
      })
    },
    // 左侧对话列表中不存在，即添加
    addSessionList () {
      let sendData = {
        delFlag: 0,
        msgFlag: 0,
        groupId: this.groupId,
        msg: this.sendMessage.replace(/</g, '&lt;'),
        code: 'msgData',
        fixedFlag: this.fixedFlag,
        sendUserName: "",
        sendUserId: this.nowUserId
      }
      this.websocketsend(sendData)
    },
    // 使会话滚动到最底部
    scrollBottom () {
      this.$refs.lastChatItemRef.scrollIntoView()
    },
    // 选择对话
    selectSession (item, index) {
      if (item.unreadData > 0) {
        let sendData = {
          groupId: item.groupId,
          code: 'readData'
        }
        this.websocketsend(sendData)
      }

      this.sessionActive = item.groupId
      this.chatTitle = item.groupName
      this.groupId = item.groupId
      this.fixedFlag = item.fixedFlag
      this.sessionList[item.groupId].unreadData = 0
      this.moreMessageBtnShow = true
      this.groupInfo = item
      this.reduceFlag = item.reduceFlag
      this.getChatHistoryList()
  
      if (item.fixedFlag === 1 && item.reduceFlag === 0) {
        this.groupForm.groupName = item.groupName
        this.getMemberList()
      }
    },
    // 查询聊天记录
    getChatHistoryPage () {
      /** 查询问题卡片 */
      const dataList = [
        {
          wtms:"申请退款操作步骤1？"
        },
        {
          wtms:"申请退款操作步骤2？"
        },
        {
          wtms:"申请退款操作步骤3？"
        },
        {
          wtms:"申请退款操作步骤4？"
        },
        {
          wtms:"申请退款操作步骤5？"
        },
        {
          wtms:"申请退款操作步骤6？"
        },
        {
          wtms:"申请退款操作步骤7？"
        },
        {
          wtms:"申请退款操作步骤8？"
        },
        {
          wtms:"申请退款操作步骤9？"
        },
        {
          wtms:"申请退款操作步骤10？"
        },
        {
          wtms:"申请退款操作步骤11？"
        },
      ]
      this.cardDataList = dataList
      this.chatList.push({
        card:true,
        delFlag: 0,
        msgFlag: 0,
        msg: this.change(dataList),
        sendTime: parseTime(new Date(), '{y}-{m}-{d} {h}-{i}-{s}'),
        sendUserName: "客服",
        sendUserId: "客服",
        show: false
      })
    },
    // 换一换
    changeData(index){
      this.chatList[index].msg = this.change(this.cardDataList)
    },
    change(dataList){
      let arrayShow = [];
      let index = 0;
      if (this.index === dataList.length) {
        this.index = 0;
      }
      for (let i = this.index; i < this.index + 5; i++) {
        if (dataList[i]) {
          arrayShow.push(dataList[i]);
          index = i;
        }
      }
      this.index = index + 1;
      return arrayShow;
    },
    // 查询人员对话种的聊天记录
    getChatHistoryList () {
      chatHistoryListVisitorApi({
        groupId: this.groupId
      })
      .then(({ data, code }) => {
        console.log("chatHistoryListVisitorApi=",data)
        if (code === '00000') {
          this.chatList = data.map(item => ({...item, show: false}))
          if (data.length < 10) {
            this.moreMessageBtnShow = false
          }
          this.$nextTick(() => {
            // document.getElementById("infoId").scrollIntoView(false);
            this.scrollBottom()
          })
        }
      })
    },
    // 鼠标右键
    rightMouse(item, event) {
      item.mouseRightShow = true
      item.rightContainerTop = event.layerY + 5 + 'px'
      item.rightContainerLeft = event.layerX + 5 + 'px'
      this.choseId=item.groupId;
      this.delButton=true;
    },
    //关闭删除按钮
    closeDelButton(){
      this.delButton=false;
      this.choseId='';
    },
    // 删除对话
    delSession (item, index) {
      if (item.groupId === this.groupId) {
        this.groupId = ''
        this.chatTitle = ''
        this.chatList = []
      }
      delete this.sessionList[item.groupId]
      chatHistoryDelApi({
        groupId: item.groupId
      })
    },
    // 发送表情
    sendEmoji(val) {
      console.log("标签=",val)
      this.sendMessage += val
    },
    // 上传成功回调
    handleAvatarSuccess({ data }) {
      let sendData = {
        groupId: this.groupId,
        msg: data.fileOriginName,
        fileSuffix: data.fileSuffix,
        fileSizeInfo: data.fileSizeInfo,
        fileId: data.fileId,
        code: 'msgData',
        sendUserName: store.state.user.name,
        sendUserId: store.state.user.userId
      }
      this.websocketsend(sendData)

      let obj = this.sessionList[this.groupId]
      if (obj) {
        obj.lastMsg = data.fileOriginName
        obj.lastTime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
      } else {
        this.sessionList[this.groupId] = {
          unreadData: 0,
          lastMsg: data.fileOriginName,
          groupId: this.groupId,
          groupName: this.userInfoInPage.realName,
          lastTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
        }
        this.sessionActive = this.groupId
      }
    },
    // 上传之前回调
    beforeAvatarUpload(rawFile) {
      if (rawFile.size / 1024 / 1024 > 10) {
        this.$message.error('文件大小不可超过10M!')
        return false
      }
      return true
    },
    // 获取图片
    getIcon (item) {
      return this.baseURL()+`/sysFileInfo/public/preview?fileId=${item.fileId}`
    },
    // 下载按钮
    downloadBtn (item) {
      // window.location.href = this.baseURL()+`sysFileInfo/publicDownload?fileId=${item.fileId}`
      // 本地
      window.location.href = `http://localhost:9528/dev-api/file/sysFileInfo/publicDownload?fileId=${item.fileId}`
    },
    // 撤回按钮
    revokeBtn (item, index) {
      console.log("item=",item)
      revokeAccessInfoApi({ id: item.infoId })
      .then(()=>{
        this.getChatHistoryPage()
      })
    },
    // 撤回按钮
    revokeBtnShowFn (item, index) {
      const time = new Date().getTime() - new Date(item.sendTime).getTime()
      if (time < 1000 * 60 * 2) {
        item.show = true
      }
    },
    // 获取成员
    getMemberList () {
      chatGroupInfoApi({
        groupId: this.groupId
      }).then(({code, data}) => {
        if (code === '00000') {
          this.groupUsers = data.groupUsers
          this.adminFlag = data.createUserId === store.state.user.userId
        }
      })
    },
    //发送信息
    sendMessageToUser(userInfo){
      console.log("userInfo=",userInfo)
      chatGroupQueryApi({
        userId: userInfo.userId
      }).then(({ code, data }) => {
        console.log("data=",data)
        if (code === '00000') {
          this.leftShow(1);
          this.chatTitle = userInfo.realName;
          this.groupId = data.groupId;
          this.nowChat = true;
          this.fixedFlag = data.fixedFlag;
          this.getChatHistoryList();
        }
      })
    }
  },
  mounted() {
    // 判断当前
    // this.getChatHistoryPage();
  },

  destroyed() {
    this.close();
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val);
    },
    orgFilterText(val) {
      this.$refs.orgTreeRef.filter(val);
    },
    userInfo(val) {
      // console.log("val=",val);
      this.userInfoInPage = val;
      this.chatTitle = val.realName;
    },
    newGroupId() {
      this.getChatHistoryPage();
    },
  },
};
</script>


<style lang="scss" scoped>
p {
  margin: 0;
}
div.chat {
  display: flex;
  height: 100%;
  width: 100%;
  // max-height: 85vh;
  min-height: 85vh;
}
// 右侧对话列表
.chat-container {
  flex: 1;
  height: 100%;
  width: 70%;
  // max-height: 85vh;
  min-height: 85vh;
  background: #f6f8f9;
  .chat-list {
    height: calc(60% - 1px);
    border-bottom: 1px solid #ddd;

    .chat-title {
      height: 40px;
      padding: 10px;
      font-size: 18px;
      font-style: italic;
      border-bottom: 1px solid #ddd;
      align-items: center;
    }
    ul {
      padding: 0px 0px;
      height: calc(72vh - 50px);
      overflow-y: auto;
      .more-message-btn {
        padding-top: 5px;
        text-align: center;
        .el-button {
          font-size: 12px;
          font-style: italic;
        }
      }
      li {
        padding-left: 10px;
        padding-right: 10px;
        list-style-type: none;
      }
      // 我自己的样式
      .myself {
        display: flex;
        justify-content: right;
        & > div:first-child {
          text-align: right;
          padding-right: 10px;
          & > p:first-child {
            font-size: 14px;
            span {
              font-size: 12px;
            }
          }
          p.read-or-not {
            text-align: left;
            margin-top: 5px;
            color: #b0b2b1;
            font-size: 13px;
          }

          & > div {
            display: inline-block;
            position: relative;
          }
          .withdraw-wrapper {
            position: absolute;
            background: #1d2b3f;
            padding: 6px 15px;
            border-radius: 3px;
            left: 50%;
            top: -20px;
            transform: translateX(-50%);
            &::after {
              content: "";
              position: absolute;
              left: 25px;
              bottom: -10px;
              border: 5px solid transparent;
              border-top-color: #1d2b3f;
            }
          }
        }

        & > div:last-child {
          span {
            display: inline-block;
            width: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: #fff;
            background: #75b9e6;
            border-radius: 50%;
          }
        }
      }

      // 对方的样式
      .others {
        display: flex;
        justify-content: left;

        & > div:first-child {
          span {
            display: inline-block;
            width: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: #fff;
            background: #5ac994;
            border-radius: 50%;
          }
        }
        & > div:last-child {
          padding-left: 8px;
          p:first-child {
            text-align: left;
            font-size: 14px;

            span {
              font-size: 12px;
            }
          }
        }

        .msg-wrapper {
          background: #ffffff !important;
        }
      }

      // 文件
      .file-wrapper {
        margin-top: 10px;
        ::v-deep .img-file {
          img {
            max-width: 300px;
            max-height: 300px;
            cursor: pointer;
          }
        }
        .text {
          font-size: 14px;
        }

        .item {
          margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
          display: table;
          content: "";
        }
        .clearfix:after {
          clear: both
        }

        .box-card {
          width: 380px;
        }
      }

      // 文本信息
      .msg-wrapper {
        margin-top: 8px;
        background: #def4ff;
        padding: 5px 10px;
        width: fit-content;
        max-width: 500px;
        border-radius: 5px;
        font-size: 15px;
        border-top-right-radius: 0px;
        white-space: pre-wrap;
        text-align: left;
      }
    }
  }

  // 消息发送框
  .chat-send {
    height: 160px;
    background: #f6f8f9;
    position: relative;
    // 工具栏
    .chat-tool {
      & > div {
        display: flex;
        align-items: center;
        padding: 5px 20px;
        ::v-deep.el-icon-folder-add {
          font-size: 26px;
          color: #98a0aa;
        }
      }
    }

    // 消息输入框
    .chat-input {
      margin-top: -5px;
      padding: 5px 10px;
      ::v-deep.el-textarea {
        .el-textarea__inner {
          box-shadow: 0 0 0 0px;
          background: transparent;
        }
      }
    }

    .chat-send-btn {
      padding: 5px 9px;
      text-align: right;
    }
  }
}
.avatar {
  background-color: #5ac994;
  font-size: 20px;
  size: 50px;
}
// 左侧个人信息
.my-info {
  width: 39px;
  padding: 20px 0;
  background: #428dbe;
  text-align: center;
  img {
    width: 30px;
  }
  .not-avatar {
    margin-top: 15px;
    cursor: pointer;
  }
}
.ulSpan {
  display: inline-block;
  width: 80px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
